<template>
  <section style="height: 100%">
    <view>
      <view class="hb" ref="imageTest" id="imageTest">
        <view class="hb-title">
         <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages.669pic.com%2Felement_pic%2F17%2F41%2F44%2F37%2F2a66b57a4eb523227bd2d0e3532ccd85.jpg%21w700wb&refer=http%3A%2F%2Fimages.669pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633705158&t=0d0f564c295823a54cc784f4602695ce">
        </view>
        <view class="hb-qc">
          <text class="hb-yqm">邀请新人，赚积分</text>
          <view id="qrCode">
            <canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
          </view>
        </view>
        <view class="hb-basic">
          <h1>绘图信</h1>
          <p>来着“立式”的分享</p>
        </view>
      </view>

      <view class="close" @click="handleClose">
      </view>

      <button
          plain type="info"
          @click="drawPoster"
          style="
          position: absolute;
          bottom: 5%;
          width: 80%;
          height: 50px;
          left: 50%;
          margin-left: -40%;
          border-radius: 45px;"
      >


        保存图片
      </button>
        <canvas  id='canvas' class='canvas' canvas-id="firstCanvas"> </canvas>




    </view>

  </section>
</template>



<script>

//引用weapp.qrcode组件里面的weapp.qrcode.esm.js
import drawQrcode from "./weapp.qrcode.esm.js"
export default {
  data() {
    return {
      show:false,
      //标题粘贴顶部
      fixedTrue:Boolean(true),
      qrcodePath:'./h3c.jpg',//二维码地址
    }
  },
  components:{

  },

  methods:{
    // handleClose () {
    //       console.log('关闭')
    //       this.$router.go(-1)
    //     },


//        生成二维码
    bindQRCode (shareUrl) {
      drawQrcode({
        width: 200,
        height: 200,
        canvasId: 'myQrcode',
        text: shareUrl,
      })
      this.saveQrcode()
    },

//保存二维码临时地址
    saveQrcode(){
      var qrcodePath=''
      uni.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        destWidth: 150,
        destHeight: 150,
        canvasId: 'myQrcode',
        fileType:'jpg',
        success: function(res) {
          // 在H5平台下，tempFilePath 为 base64
          console.log("canvasToTempFilePath",res)
          qrcodePath=res.tempFilePath
          return qrcodePath
        }
      })
      setTimeout(()=>{
        console.log("qrcodePath",qrcodePath)
        this.qrcodePath=qrcodePath
        this.setCanvas()
        console.log("this.qrcodePath",this.qrcodePath)
      },1000)

    },

//绘制海报
    setCanvas(){

      console.log("qrcodePath",this.qrcodePath)
      this.show=true
      setTimeout(()=>{
        this.drawPoster()
      },1000)
    },
    drawPoster(){
      var ctx=uni.createCanvasContext('firstCanvas')

      //二维码地址
      var drawImageqrcodePath=this.qrcodePath

      //获取画布的宽度和高度
      uni.createSelectorQuery().select('#imageTest').boundingClientRect(function(e){
        let canvasWidth =uni.createSelectorQuery().select('#imageTest').width||320;
        let canvasHeight = uni.createSelectorQuery().select('#imageTest').height||500;
        // 清除画布
        ctx.clearRect(0, 0, canvasWidth, canvasHeight)

        // 绘制背景
        ctx.beginPath()
        const grd = ctx.createLinearGradient(canvasWidth, 0,canvasWidth , canvasHeight)
        grd.addColorStop(0, '#4091FF')
        grd.addColorStop(1, '#57AEFF')
        ctx.rect(0, 0, canvasWidth, canvasHeight);
        ctx.setFillStyle("#57AEFF");
        ctx.stroke();
        ctx.fill();


        //绘制链接椭圆框
        ctx.beginPath()
        ctx.setLineDash([400, 400], 5);
        ctx.setLineWidth(1)
        ctx.moveTo(40, 30)
        ctx.lineTo(260, 30)
        ctx.moveTo(40, 70)
        ctx.lineTo(260, 70)
        ctx.moveTo(40, 30)
        ctx.setFillStyle('#57AEFF');
        ctx.quadraticCurveTo(15, 50, 40, 70)
        ctx.setStrokeStyle('#FFFFFF')
        ctx.moveTo(260, 30)
        ctx.quadraticCurveTo(280, 50, 260, 70)
        ctx.setStrokeStyle('#FFFFFF')
        ctx.stroke()
        ctx.fill();

        //绘制文字
        ctx.beginPath()
        ctx.setFillStyle('#FFFFFF');
        ctx.setTextAlign('center')
        ctx.setFontSize(15)
        ctx.fillText('链接二维码', 150, 55)

        ctx.fill();

        //二维码背景色
        ctx.beginPath()
        ctx.fillRect(30, 120, 240, 350)
        ctx.setFillStyle('#FFFFFF')
        ctx.fill();

        //邀请新人，赚积分
        ctx.beginPath()
        ctx.setFillStyle('#000000');
        ctx.setTextAlign('center')
        ctx.setFontSize(20)
        ctx.font='i bold 20px  sans-serif'
        ctx.fillText('邀请新人，赚积分', 150, 160)
        console.log("drawImageqrcodePath",drawImageqrcodePath)
        ctx.drawImage(drawImageqrcodePath ,80,200);
        ctx.fill();

        //绘制虚线
        ctx.beginPath()
        ctx.setStrokeStyle('#999999')
        ctx.setLineDash([10, 15], 20);
        ctx.moveTo(30,400);
        ctx.lineTo(265, 400);
        ctx.stroke();
        ctx.fill();


        //绘制绘图
        ctx.beginPath()
        ctx.setFillStyle('#41485D');
        ctx.setFontSize(20)
        ctx.font='i bold 20px  sans-serif'
        ctx.fillText('绘图', 80, 450)
        ctx.fill();


        //绘制绘图
        ctx.beginPath()
        ctx.setFillStyle('#858B9C');
        ctx.setFontSize(10)
        ctx.fillText('来着“李四”的分享',210, 450)
        ctx.fill();

        //绘制结束
        ctx.draw(false,(()=>{
          setTimeout(()=>{
            uni.hideLoading()
          },1000)
          //保存绘图图片，产生临时文件
          uni.canvasToTempFilePath({
            canvasId:'firstCanvas',
            quality:1,
            complete(reset) {
              //保存图片
              uni.saveImageToPhotosAlbum({
                filePath:reset.tempFilePath,
                success(resSave) {
                  setTimeout((resSave)=>{
                    uni.showToast({
                      title:'保存成功',
                      icon:'success'
                    })
                  },2000)
                },
                fail(err) {
                  console.log("err",err)

                  //是否授权相册
                  if(err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response")
                  {
                    uni.showModal({
                      title:'提示',
                      content:'未授权相册，请重新授权！',
                      showCancel:false,
                      success:modalSuccess => {
                        //获取权限
                        uni.openSetting({
                          success(settingdata) {
                            if (settingdata.authSetting['scope.writePhotosAlbum']) {
                              console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                            }else {
                              console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                            }
                          }
                        })
                      }
                    })
                  }

                }
              })
            }
          })

        })())

      }).exec();
      setTimeout(()=>{
        //关闭弹出框
        // this.$refs.popup.close()
        this.show=false
      },3000)

    },
    createewm(){
      const shareUrl="https://www.baidu.com/"
      this.shareUrl=shareUrl
      console.log(shareUrl)
      setTimeout(() => {  this.bindQRCode(shareUrl); }, 500)
      setTimeout(() => {  uni.hideLoading(); }, 1000)
    },
  },
  onShow(){
    console.log(this.$route)
    // const shareUrl=this.$route.params
    const shareUrl="https://www.baidu.com/"
    this.shareUrl=shareUrl
    console.log(shareUrl)
    setTimeout(() => {  this.bindQRCode(shareUrl); }, 500)
    setTimeout(() => {  uni.hideLoading(); }, 1000)
  },

}
</script>


<style>
#canvas{
  width: 300px;
  height: 600px;
}
.hb{
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(#57AEFF, #4091FF);
  background-size: 100%;
}


.hb-title{
  margin: auto 10% auto;
  height: 40px;
  line-height: 40px;
  width: 80%;
  border:1px solid #fff;
  border-radius: 45px;
  text-align: center;
  font-size:14px;
  color: #fff;
  position: relative;
  top:40px;
}
.hb-qc{
  width: 80%;
  height: 50%;
  margin: 90px auto auto;
  border-radius: 20px 20px 0 0;
  text-align: center;
  background: #fff;
  border-bottom: 3px #C6C6C6 dashed;
}
#qrCode{
  width: 200px;
  height: 200px;
  margin:  0 auto;
}
.hb-yqm{
  padding: 10px 20px;
  text-align: left;
  font-size: 14px;
  color: #111A34;
  display: flex;
  justify-content: center;
  height: 24px;
  font-weight: 700;
  font-size: 20px;
  padding: 34px;
}
.hb-basic{
  height: 68px;
  line-height: 68px;
  background: #fff;
  width: 80%;
  margin: 0 auto;
  border-radius: 0 0 20px 20px;
  display: flex;
  justify-content: space-around;
  color: #41485D;
  align-content: center;

}
.hb-basic h1{
  font-size: 18px;
  font-weight: 700;
}
.codeImg{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}


.hb-desc{
  width: 100%;
  height: auto;
}

.cv-img{
  width: 100%;
  height:60Vh;
}
.close{
  position: absolute;
  top: 40px;
  left: 40px;
  width: 40px;
  height: 40px;
}
</style>